<template>
  <div class="neutron-kit-provider">
    <slot></slot>
    <DesktopConnectModal :show="showDesktopConnectModal" />
    <MobileConnectModal :show="showMobileConnectModal" />
  </div>
</template>
<script setup lang="ts">
import { provide, ref } from 'vue'
import DesktopConnectModal from '../Modal/DesktopConnectModal.vue'
import {
  MobileModalConstant,
  DesktopModalConstant,
} from '../../constants/ModalContextConstant'
import MobileConnectModal from '../Modal/MobileConnectModal.vue'

const showDesktopConnectModal = ref(false)
const showMobileConnectModal = ref(false)

provide(MobileModalConstant.SHOW_MODAL_UID, showMobileConnectModal)
provide(DesktopModalConstant.SHOW_MODAL_UID, showDesktopConnectModal)
</script>

<style lang="scss">
@use '../../styles/index.scss';
</style>
